<!--
  -  Copyright 2020 Huawei Technologies Co., Ltd.
  -
  -  Licensed under the Apache License, Version 2.0 (the "License");
  -  you may not use this file except in compliance with the License.
  -  You may obtain a copy of the License at
  -
  -      http://www.apache.org/licenses/LICENSE-2.0
  -
  -  Unless required by applicable law or agreed to in writing, software
  -  distributed under the License is distributed on an "AS IS" BASIS,
  -  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  -  See the License for the specific language governing permissions and
  -  limitations under the License.
  -->

<template>
  <div
    class="bread-crumb"
    v-if="isShow"
  >
    <el-breadcrumb separator=">">
      <el-breadcrumb-item
        v-for="item in breadCrumbData"
        :key="item.name"
        :to="item.path"
      >
        {{ language === 'en' ? item.nameEn : item.nameCn }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      breadCrumbData: [],
      isShow: false
    }
  },
  computed: {
    ...mapState(['language'])
  },
  watch: {
    $route (route) {
      this.isShow = false
      this.breadCrumbData = route.meta.breadcrumb
      if (this.breadCrumbData && this.breadCrumbData.length > 0) this.isShow = true
    }
  },
  methods: {},
  mounted () {
    this.breadCrumbData = this.$route.meta.breadcrumb
    let nameObj = {
      nameCn: '',
      nameEn: ''
    }
    if (this.$route.fullPath === '/myappdetail') {
      let detailData = JSON.parse(sessionStorage.getItem('myappdetail'))
      nameObj.nameCn = detailData.name
      nameObj.nameEn = detailData.name
      this.breadCrumbData.splice(2, 1, nameObj)
    } else if (this.$route.fullPath === '/detail') {
      let detailData = JSON.parse(sessionStorage.getItem('appstordetail'))
      nameObj.nameCn = detailData.name
      nameObj.nameEn = detailData.name
      this.breadCrumbData.splice(1, 1, nameObj)
    }
    if (this.breadCrumbData && this.breadCrumbData.length > 0) this.isShow = true
  }
}
</script>
<style lang='less'>
.bread-crumb {
  padding: 0 56px;
  .el-breadcrumb {
    line-height: 70px;
    font-size: 14px;
  }
}
</style>
